<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环遍历结构</title>
</head>
<body>
    <div id="app">
        <h1>循环结构</h1>
        <h2>------------------获取数组的值----------------</h2>
        <!-- 指定午饭数组,之后循环遍历输出 -->
        <h3 v-for="item in lunch">{{item}}</h3>
        <h2>------------------获取数组的值与下标----------------</h2>
        <!-- 获取数组下标 -->
        <h3 v-for="(item,index) in lunch">下标{{index}}的值为{{item}}</h3>
        
        <h2>------------------获取数组对象的值----------------</h2>
        <h1>遍历数组对象</h1>
        <p v-for="user in list">
            id号: {{user.id}} | 名称: {{user.name}}
        </p>
    </div>
    l
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                lunch: ['宫保鸡丁','爆炒腰花','土豆片','土豆丝','土豆泥'],
                list: [
                    {id: 1, name: "张三"},
                    {id: 2, name: "李四"},
                    {id: 3, name: "王五"}
                ]
            },
            methods:{
            }
        })
    </script>
</body>
</html>